<template>
  <div>
    <div class="modifyContent">
      <div class="modifyImgContent">
        <div
          v-if="ismodify"
          @mouseleave="leaveMouse"
          @mouseenter="onmouse"
          @click="modifyImg"
          class="imgDele"
        >
          <div v-if="deleIcon" class="dialogImg">
            <i class="el-icon-delete"></i>
          </div>
          <img v-if="bookDate.coverUrl" :src="bookDate.coverUrl" alt="" />
          <img
            v-else
            style="width: 85px; height: 115px; margin-bottom: 10px"
            src="../../../../assets/active.png"
            alt=""
          />
        </div>
        <img
          v-else
          :src="
            bookDate.coverUrl
              ? bookDate.coverUrl
              : '../../../../assets/active.png'
          "
          alt=""
          style="width: 85px; height: 115px; margin-bottom: 10px"
        />
        <el-upload
          v-if="ismodify"
          action="javasprict:;"
          :show-file-list="false"
          :http-request="upLoadImg"
        >
          <div class="upImg" type="primary" size="small">{{$t("home.uploadCover")}}</div>
        </el-upload>
      </div>
      <div v-if="ismodify" class="tip">
        <p>{{$t("home.notice")}}</p>
        <p>{{$t("home.uploadPixelJpg5")}}</p>
        <p>{{$t("home.coverShowWorkPen")}}</p>
        <p>{{$t("home.recommendedUse")}}</p>
        <p>{{$t("home.uploadingPornographic")}}</p>
        <p>{{$t("home.coverReviewed3")}}</p>
        <p>{{$t("home.noCoverResources")}}</p>
      </div>
    </div>
    <el-form class="formContent" ref="setBook" label-width="120px" :rules="rules" :model="bookDate">
      <el-form-item :label="$t('home.titleWork')" porp="bookTitle">
        <el-input
          v-if="ismodify"
          v-model="bookDate.bookTitle"
          :placeholder="$t('home.pleaseFillIn')"
        ></el-input>
        <span v-else>{{ bookDate.bookTitle }}</span>
        <p
          v-if="ismodify"
          style="position: absolute; bottom: 0; right: 10px; line-height:48px"
        >
          {{ bookDate.bookTitle.length }}/16
        </p>
      </el-form-item>
      <el-form-item :label="$t('home.workID')">
        <span>{{ bookDate.bookId }}</span>
      </el-form-item>
      <el-form-item :label="$t('home.classificationWorks')">
        <span>
          {{ bookDate.category.name }}
        </span>
        <span></span>
      </el-form-item>
      <!-- <el-form-item label="作品标签：" prop="inputValue">
        <el-input
          v-if="ismodify"
          placeholder="自定义或选择标签"
          v-model="inputValue"
          ref="saveTagInput"
          size="small"
          @keyup.enter.native="handleInputConfirm"
          @blur="handleInputConfirm"
        >
          <el-button type="primary" @click="getTagesFn" slot="append"
            >请选择标签</el-button
          >
        </el-input>
        <div>
          <el-tag
            style="marginright: 10px"
            :key="tag"
            v-for="tag in tags"
            :closable="ismodify ? true : false"
            :disable-transitions="false"
            @close="handleClose(tag)"
          >
            {{ tag }}
          </el-tag>
        </div>
      </el-form-item> -->
      <el-form-item :label="$t('home.bookDescription')" prop="bookIntro">
        <el-input
          v-if="ismodify"
          type="textarea"
          v-model="bookDate.bookIntro"
          :placeholder="$t('home.enter20to300')"
          rows="8"
        >
        </el-input>
        <p
          v-if="ismodify"
          style="position: absolute; bottom: 10px; right: 10px"
        >
          {{ bookDate.bookIntro.length }}/300
        </p>
        <span v-else>{{ bookDate.bookIntro }}</span>
      </el-form-item>
    </el-form>
    <div v-if="!ismodify" class="modifyNowButton">
      <el-button @click="changeModify" type="primary">{{$t("home.immediatelyChange")}}</el-button>
    </div>
    <div class="sureModify" v-if="ismodify">
      <el-button @click="canncelModify">{{$t("home.cancel")}} </el-button>
      <el-button type="primary" @click="saveModify">{{$t("home.confirmModification")}} </el-button>
    </div>
    <!-- 标签层 -->
    <el-dialog :title="$t('home.workLabel')" :visible.sync="dialogFormVisiblexx">
      <div class="selectTag" style="margintop: 20px">
        <div class="tagClass">
          <el-tag
            style="marginright: 10px"
            :key="tag"
            v-for="tag in tags"
            :closable="ismodify ? true : false"
            :disable-transitions="false"
            @close="handleClose(tag)"
          >
            {{ tag }}
          </el-tag>
        </div>
        <el-tag
          style="marginright: 10px"
          :key="tag"
          v-for="tag in tagList"
          @click="addtag(tag)"
        >
          {{ tag }}
        </el-tag>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisiblexx = false">{{$t("home.cancel")}}</el-button>
        <el-button type="primary" @click="tagAddSubmit">{{$t("home.confirm")}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  updateBookInfo,
  getTages,
  getBookInfo,
} from "@/api/authorCenter/createBook";
import { uploadFile } from "@/api/info";

export default {
  data() {
    return {
      ismodify: false,
      dialogFormVisible: false,
      dialogFormVisiblexx: false,
      deleIcon: false,
      bookDate: {},
      inputVisible: false,
      inputValue: "",
      tagList: [],
      tags: [],
      dialogFormVisible: false,
      rules: {
        bookIntro: [{ min: 20, trigger: "blur", message: this.$t('home.noLessThan20Words') }],
      },
    };
  },
  methods: {
   
    upLoadImg(res) {
      const isJPG = res.file.type === "image/jpeg";
      const isPng = res.file.type === "image/png";
      const isLt2M = res.file.size/(1024*1024) <=5;
      let isWidth = null;
      let isHeight = null;
      let isWeiHei = null;
      let newImg = new Image();
      let that = this
      newImg.src = URL.createObjectURL(res.file);

      newImg.onload = function () {
        isWidth = newImg.width;
        isHeight = newImg.height;
        console.log(isWidth, isHeight);
        isWeiHei = isWidth == 600 && isHeight == 800;
        if ((isJPG || isPng) && isLt2M && isWeiHei) {
          that.bookDate.coverUrl = URL.createObjectURL(res.file);
          let fromData = new FormData();
          fromData.append("file", res.file);
          uploadFile(fromData).then((res) => {
            that.bookDate.coverUrl = res.source;
          });
        } else {
          that.$message.error(this.$t('home.uploadProfilePictures'));
          return false;
        }
      };
    },
    onmouse() {
      this.deleIcon = true;
    },
    leaveMouse() {
      this.deleIcon = false;
    },
    modifyImg() {
      this.bookDate.coverUrl = "";
    },
    //确认标签添加
    tagAddSubmit() {
      this.dialogFormVisiblexx = false;
    },
    //获取标签
    getTagesFn() {
      getTages().then((res) => {
        this.tagList = res.source;
      });
      this.dialogFormVisiblexx = true;
    },
    canncelModify() {
      this.getBooKMessage();
      this.ismodify = false;
    },
    //确认修改
    saveModify() {
      this.ismodify = false;
      let params = {
        id: this.bookDate.bookId,
        bookIntro: this.bookDate.bookIntro,
        bookTitle: this.bookDate.bookTitle,
        coverUrl: this.bookDate.coverUrl,
        plotlabel: this.tags.join(","),
      };
      updateBookInfo(params).then((res) => {});
    },
    //立即修改
    changeModify() {
      this.ismodify = true;
    },
    //删除选中标签console.log()
    handleClose(tag) {
      this.tags.splice(this.tags.indexOf(tag), 1);
    },
    addtag(tag) {
      if (this.tags.length >= 3) {
        this.$message({
          type: "error",
           message: this.$t('home.maximumThreeLabels'),
        });
      } else {
        this.tags.push(tag);
      }
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    //自定义标签
    handleInputConfirm() {
      if (this.tags.length >= 3) {
        this.$message({
          type: "error",
          message: this.$t('home.maximumThreeLabels'),
        });
      } else {
        if (this.inputValue) {
          this.tags.push(this.inputValue);
        }
        this.inputVisible = false;
        this.inputValue = "";
      }
    },
    getBooKMessage() {
      let params = { checkBookId: this.$route.query.bookid, type: "" };
      getBookInfo(params).then((res) => {
        this.bookDate = res.source;
        this.tags = this.bookDate.plotlabel.split(",");
      });
    },
  },
  mounted() {
    this.getBooKMessage();
  },
};
</script>

<style scoped="scoped" lang="scss">
::v-deep .el-input__inner{
  height: 48px;
}
p{
  color:#999;
}
.modifyButton{
  width: 291px;
}
::v-deep .el-button{
  height: 48px;
  border-radius: 8px;
}
::v-deep .el-button{
  width: 221px;
  font-size: 18px;
}
.formContent {
  span{
    font-size: 18px;
    color:#000
  }
}
::v-deep .el-form-item__label{
  font-size: 18px;
  color:#000;
}
.sureModify {
  margin: 40px 0;
  text-align: center;
}
.modifyNowButton {
  text-align: center;
  
}
.modifyContent {
  display: flex;
  .modifyImgContent {
    margin-right: 15px;
    img{
      border-radius: 8px;
    }
  }
  .upImg {
    margin: 10px 0 20px 0;
    border: 1px solid #000;
    width: 85px;
    line-height: 30px;
    border-radius: 8px;
  }
}
.imgDele {
  position: relative;
  width: 85px;
  height: 115px;
  img {
    width: 85px;
    height: 115px;
    margin-bottom: 10px;
  }
  .dialogImg {
    i {
      color: #fff;
    }
    cursor: pointer;
    background: rgba(0, 0, 0, 0.5);
    width: 85px;
    height: 115px;
    position: absolute;
    z-index: 10;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
